<template>
  <div class="mt5">
    <div class="filter-logic-wrap">
      <span>{{ $t("form.dataFilter.filterData") }}</span>
      <el-select
        class="ml5 mr5"
        style="width: 21%"
        size="default"
        v-model="filterParams.rel"
      >
        <el-option
          v-for="item in relList"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <span class="datafilter-desc">
        {{ $t("form.dataFilter.conditionData") }}
      </span>
      <el-button
        size="small"
        class="ml20"
        icon="ele-Delete"
        @click="handleCleanFilter"
        plain
      >
        {{ $t("form.dataFilter.clean") }}
      </el-button>
      <el-button
        size="small"
        class="ml20"
        type="primary"
        v-if="showQuickFilter"
        icon="ele-Select"
        @click="handleSaveFilter"
        v-re-click
        plain
      >
        {{ $t("form.dataFilter.saveFilter") }}
      </el-button>
    </div>
    <div
      class="mt10 quick-filter-wrap"
      v-if="showQuickFilter"
    >
      <span>
        {{ $t("form.dataFilter.quickFilter") }}
      </span>
      <el-tag
        size="small"
        class="ml20 cursor-pointer filter-tag-item"
        v-for="f in filterList"
        :key="f.id"
        closable
        @close="handleDeleteFilter(f.id)"
        @click="handleUsedFilter(f)"
      >
        {{ f.filterName }}
      </el-tag>
    </div>
    <div class="filter-logic-wrap">
      <el-link
        :underline="false"
        style="margin-top: 10px"
        type="primary"
        @click="addConditionHandle"
      >
        <el-icon>
          <ele-Plus />
        </el-icon>
        {{ $t("form.dataFilter.addCondition") }}
      </el-link>
    </div>
    <div
      v-if="filterParams.conditionList.length"
      class="condition-wrap"
    >
      <el-row
        v-for="(item, index) in filterParams.conditionList"
        :key="index"
        :gutter="10"
        align="middle"
        class="mt5 condition-item"
        justify="center"
        type="flex"
      >
        <el-col
          :span="7"
          :xs="24"
        >
          <el-select
            size="default"
            v-model="item.formItemId"
            filterable
            :placeholder="$t('form.dataFilter.selectPlaceholder')"
            @change="
              val => {
                handleConditionChange(val, item);
              }
            "
          >
            <el-option
              v-for="field in fields"
              :key="field.value"
              :label="field.label"
              :value="field.value"
            />
          </el-select>
        </el-col>
        <el-col
          :span="7"
          :xs="24"
        >
          <el-select
            size="default"
            v-model="item.method"
            :placeholder="$t('form.dataFilter.conditionPlaceholder')"
          >
            <el-option
              v-for="c in getConditionRuleList(item)"
              :key="c.value"
              :label="c.label"
              :value="c.value"
            />
          </el-select>
        </el-col>
        <el-col
          :span="8"
          :xs="24"
        >
          <FormOptionSelect
            v-if="
              ['SELECT', 'CHECKBOX', 'RADIO'].includes(getFiledType(item.formItemId)) &&
              ['INCLUDE', 'NOT_INCLUDE', 'EQ', 'NE'].includes(item.method)
            "
            size="default"
            :enable-remove-html-tag="false"
            v-model="item.value"
            :multiple="['INCLUDE', 'NOT_INCLUDE'].includes(item.method) || ['CHECKBOX'].includes(getFiledType(item.formItemId))"
            allow-create
            clearable
            default-first-option
            filterable
            :item="item"
            :placeholder="$t('form.dataFilter.selectOption')"
          ></FormOptionSelect>
          <el-select
            size="default"
            v-else-if="['DATE'].includes(getFiledType(item.formItemId)) && item.method === 'TIME_RANGE'"
            v-model="item.value"
            filterable
            collapse-tags
            :placeholder="$t('form.dataFilter.rangePlaceholder')"
          >
            <el-option
              v-for="tr in timeRanges"
              :key="tr.value"
              :label="tr.label"
              :value="tr.value"
            />
          </el-select>
          <el-date-picker
            v-else-if="['DATE'].includes(getFiledType(item.formItemId))"
            v-model="item.value"
            :disabled="['IS_NULL', 'NOT_NULL'].includes(item.method)"
            :format="getObjValue(getFieldScheme(item.formItemId), 'format', defaultDateTimeFormat)"
            :type="getObjValue(getFieldScheme(item.formItemId), 'type', 'datetime')"
            :value-format="getObjValue(getFieldScheme(item.formItemId), 'value-format', defaultDateTimeFormat)"
            :placeholder="$t('form.dataFilter.datePlaceholder')"
          />
          <user-select
            v-else-if="['USER'].includes(getFiledType(item.formItemId))"
            v-model="item.value"
          />
          <el-select
            v-else-if="'workflowStatus' === item.formItemId"
            v-model="item.value"
            filterable
            collapse-tags
            size="default"
            multiple
            :placeholder="$t('form.dataFilter.userPlaceholder')"
          >
            <el-option
              v-for="user in flowStatusList"
              :key="user.value"
              :label="user.label"
              :value="user.value"
            />
          </el-select>
          <el-input
            size="default"
            v-else
            v-model="item.value"
            :disabled="['IS_NULL', 'NOT_NULL'].includes(item.method)"
            :placeholder="$t('form.dataFilter.enterCondition')"
          />
        </el-col>
        <el-col
          :span="2"
          :xs="24"
        >
          <el-icon
            @click="removeConditionHandle(index)"
            class="delete-btn"
          >
            <ele-Delete />
          </el-icon>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup lang="ts">
import FormOptionSelect from "@/views/components/FormOptionSelect/index.vue";
import { dataFilterEmits, dataFilterProps, useDataFilter } from "@/views/form/data/filter/useDataFilter";
import UserSelect from "@/views/system/user/UserSelect.vue";

const props = defineProps({
  ...dataFilterProps
});

const emit = defineEmits([...dataFilterEmits]);

const {
  relList,
  timeRanges,
  filterParams,
  flowStatusList,
  defaultDateTimeFormat,
  getFiledType,
  getFieldScheme,
  getObjValue,
  handleConditionChange,
  getConditionRuleList,
  removeConditionHandle,
  addConditionHandle,
  handleCleanFilter,
  handleSaveFilter,
  filterList,
  handleDeleteFilter,
  handleUsedFilter,
  getFilterData
} = useDataFilter(props, emit);

defineExpose({
  getFilterData
});
</script>

<style lang="scss" scoped>
.filter-logic-wrap {
  display: flex;
  align-items: center;

  .el-select {
    width: 21%;
  }
}
:deep(.filter-tag-item .el-tag__content) {
  max-width: 220px;
  overflow: hidden;
}

@media (max-width: 576px) {
  .filter-logic-wrap {
    padding-left: 10px;
    flex-wrap: wrap !important;
    gap: 4px;

    .el-select {
      width: 160px !important;
    }
  }

  .quick-filter-wrap {
    padding-left: 10px;
    flex-wrap: wrap !important;
    gap: 4px;

    .el-tag {
      max-width: 100px;
    }
  }

  .condition-wrap {
    width: 95%;
    margin: 0 auto;

    .el-col {
      margin-top: 2px;
    }

    .el-select,
    .el-input {
      width: 90% !important;
    }

    .condition-item {
      background-color: var(--el-color-primary-light-10);
      padding: 10px;
      position: relative;
      border-radius: 3px;

      .delete-btn {
        position: absolute;
        cursor: pointer;
        color: var(--el-color-danger);
        font-size: 25px;
        top: 40%;
        right: 20px;
      }
    }
  }
}
</style>
